<template>
  <div class="progress-component">
    <el-progress 
      :percentage="百分比" 
      :type="类型" 
      :stroke-width="线宽" 
      :text-inside="文字内置" 
      :color="颜色" 
      :show-text="显示文字"
      :status="状态"
    ></el-progress>
  </div>
</template>

<script>
export default {
  name: 'ProgressComponent',
  componentName: '进度条',
  icon: 'el-icon-data-line',
  defaultProps: {
    百分比: 50,
    类型: 'line',
    线宽: 6,
    文字内置: false,
    颜色: '',
    显示文字: true,
    状态: ''
  },
  props: {
    百分比: {
      type: Number,
      default: 50,
      validator: value => {
        return value >= 0 && value <= 100;
      }
    },
    类型: {
      type: String,
      default: 'line',
      validator: value => {
        return ['line', 'circle', 'dashboard'].includes(value);
      }
    },
    线宽: {
      type: Number,
      default: 6
    },
    文字内置: {
      type: Boolean,
      default: false
    },
    颜色: {
      type: String,
      default: ''
    },
    显示文字: {
      type: Boolean,
      default: true
    },
    状态: {
      type: String,
      default: '',
      validator: value => {
        return ['', 'success', 'exception', 'warning'].includes(value);
      }
    }
  }
};
</script>

<style scoped>
.progress-component {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>